{% extends 'base_form.html' %}
{% load static material_form %}

{% block formtitle %}{{ view.form_class.description|default:"Widgets demo" }}{% endblock %}

{% block formbody %}
{% if form.template %}
    {% include form.template %}
{% else %}
    {% form %}{% endform %}
{% endif %}
{% endblock %}

{% block result %}
{% if form.cleaned_data %}
<div class="row valign">
    <div class="col s12 m8 offset-m2 l8 offset-l2">
        <div class="card">
            <div class="card-content">
                <span class="card-title grey-text text-darken-2">Cleaned Data</span>
                <pre>{{ form.cleaned_data }}</pre>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block actions %}
<div class="left">
    <a href="#form_source" class="modal-trigger align-right blue-text">Source</a>
</div>
<div class="right-align">
    <button class="btn btn-primary" type="submit">Submit</button>
</div>
<dmc-modal><div id="form_source" class="modal">
    <div class="modal-content">
        <div class="section">
            <h5>Code</h5>
            <pre><code class="python">{{ form.source.rstrip|linebreaksbr }}</code></pre>
        </div>
        <div class="divider"></div>
        <div class="section">
            <h5>Html</h5>
            <pre><code class="django">&lt;form method="POST" class="viewform"&gt;{% verbatim %}{% csrf_token %}{% endverbatim %}{% if form.template %}{{ form.template.origin.source.rstrip|linebreaksbr }}{% else %}{% templatetag openblock %} form {% templatetag closeblock %}{% templatetag openblock %} endform {% templatetag closeblock %}{% endif %}
    &lt;button type="submit" name="_submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
            </code></pre>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
        </div>
    </div>
</div></dmc-modal>
{% endblock %}


{% block sidebar %}
<dmc-dropdown>
    <a class="hide-on-small-only dropdown-button dropdown-trigger btn-floating btn-large waves-effect waves-light green" href='#' data-target="dropdown1" data-constrainwidth style="position:absolute;right:30px; top: 30px"><i class="material-icons">view_headline</i></a>
</dmc-dropdown>

<ul id="dropdown1" class="dropdown-content">
    <li><a href="/demo/widget/boolean/">BooleanField</a></li>
    <li><a href="/demo/widget/char/">CharField</a></li>
    <li><a href="/demo/widget/choice/">ChoiceField</a></li>
    <li><a href="/demo/widget/date/">DateField</a></li>
    <li><a href="/demo/widget/datetime/">DateTimeField</a></li>
    <li><a href="/demo/widget/decimal/">DecimalField</a></li>
    <li><a href="/demo/widget/duration/">DurationField</a></li>
    <li><a href="/demo/widget/email/">EmailField</a></li>
    <li><a href="/demo/widget/file/">FileField</a></li>
    <li><a href="/demo/widget/filepath/">FilePathField</a></li>
    <li><a href="/demo/widget/float/">FloatField</a></li>
    <li><a href="/demo/widget/image/">ImageField</a></li>
    <li><a href="/demo/widget/integer/">IntegerField</a></li>
    <li><a href="/demo/widget/ipaddress/">GenericIPAddressField</a></li>
    <li><a href="/demo/widget/multiplechoice/">MultipleChoiceField</a></li>
    <li><a href="/demo/widget/nullbolean/">NullBooleanField</a></li>
    <li><a href="/demo/widget/regex/">RegexField</a></li>
    <li><a href="/demo/widget/slug/">SlugField</a></li>
    <li><a href="/demo/widget/time/">TimeField</a></li>
    <li><a href="/demo/widget/url/">URLField</a></li>
    <li><a href="/demo/widget/uuid/">UUIDF</a></li>
    <li><a href="/demo/widget/combo/">ComboField</a></li>
    <li><a href="/demo/widget/splitdatetime/">SplitDateTimeField</a></li>
    <li><a href="/demo/widget/modelchoice/">ModelChoiceField</a></li>
    <li><a href="/demo/widget/modelmultichoice/">ModelMultipleChoiceField</a></li>
    <li><a href="/demo/widget/password/">PasswordInput</a></li>
    <li><a href="/demo/widget/hidden/">HiddenInput</a></li>
    <li><a href="/demo/widget/textarea/">Textarea</a></li>
    <li><a href="/demo/widget/radioselect/">RadioSelect</a></li>
    <li><a href="/demo/widget/checkboxmultiple/">CheckboxSelectMultiple</a></li>
    <li><a href="/demo/widget/fileinput/">FileInput</a></li>
    <li><a href="/demo/widget/splithiddendatetime/">SplitHiddenDateTimeWidget</a></li>
    <li><a href="/demo/widget/selectdate/">SelectDateWidget</a></li>
  </ul>
{% endblock %}

{% block extrajs %}
<script type="text/javascript">
  $('.modal').modal();
  $('.dropdown-trigger').dropdown({constrainWidth: false});
</script>
{% endblock %}
